

(function () {
    // 渲染导航页
    fetch('http://chst.vip:1234/api/getbaicaijiatitle')
        .then(reason => {
            return reason.json()
        }).then(res => {
            let data = res.result
            console.log(data);
            let ele = ''
            data.forEach(item => {
                ele += `
                    <li data-titleid="${item.titleId}">${item.title}</li>
                `;
            });

            $('.navList').html(ele);

            $('.navList li').eq(0).addClass('active')
            // 给导航的每个 li 绑定点击事件
            $('.navList li').on('click', function () {

                let index = $(this).attr('data-titleid')
                $(this).addClass('active').siblings('li').removeClass('active')

                // 每次点击先清除定时器
                clearInterval(timer)
                // 点击请求对应导航的数据
                queryData(index)

            })
        });

    // 导航栏滑动效果 tarch
    let startLeft, moveLeft, endLeft = 0

    // navList 宽度
    let ulWidth = parseInt($('.navList').css('width'))
    console.log(ulWidth);
    // marsk 宽度
    let marskWidth = parseInt($('.marsk').css('width'))
    console.log(marskWidth);
    // ul 向左滑动时 ul 滑到右边隐藏的距离
    let barHide = ulWidth - marskWidth

    $('.navList').on('touchstart', function (e) {

        // 鼠标距离屏幕左边的距离
        startLeft = e.touches[0].clientX
        console.log(startLeft);

    });

    $('.navList').on('touchmove', function (e) {
        e.preventDefault();
        //这是限制ul距离左右都只能是10px
        let maxLeft = 32
        // 鼠标在 ul 上移动的距离
        moveLeft = e.touches[0].clientX - startLeft + endLeft
        console.log(moveLeft);
        //限制ul定位的位置，距离父盒子左边不能超过10   
        if (moveLeft >= maxLeft) moveLeft = maxLeft
        //限制ul定位的位置，距离父盒子右边不能超过10   
        if (moveLeft <= -(maxLeft + barHide)) moveLeft = -(maxLeft + barHide)
        $(this).css({ transition: 'none', left: moveLeft })

    });

    $('.navList').on('touchend', function () {
        //当移动ul距离左边超过0时(left>0),使其ul缓动滑动到父盒子左边
        if (moveLeft >= 0) {
            moveLeft = 0
            $(this).css({ transition: 'all 0.5s ease 0s' })
        };
        //当移动ul距离右边超过0时(left>0),使其ul缓动滑动到父盒子右边
        if (moveLeft <= -barHide) {
            moveLeft = -barHide
            $(this).css({ transition: 'all 0.5s ease 0s' })
        };
        // 解决直接点击 获取不到 endleft 值 导致后面功能实现不了
        endLeft = moveLeft || 0
        console.log(endLeft);
        $(this).css({ left: endLeft })


    });



    // 渲染优惠卷详情列表

    function queryData(value) {
        fetch('http://chst.vip:1234/api/getbaicaijiaproduct?titleid=' + value)
            .then(reason => {
                return reason.json()
            }).then(res => {
                let data = res.result
                // console.log(data);
                let ele = ''
                data.forEach(item => {
                    ele += `
                <li>
                    <a href="">
                        <div class="left">
                            ${item.productImg}
                        </div>
                        <div class="right">
                            <h4>
                                ${item.productName}
                            </h4>
                            <div class="price">
                                ${item.productPrice}
                                <del>1880</del>
                            </div>
                            <div class="down">
                                <div class="bar">
                                    <div class="bar_in">0%</div>
                                </div>
                                <div class="yiling">已领<span class="a">0</span>张/剩余<span class="b">126</span>张</div>
                                <div class="click">
                                    <div class="zuo">点此领取优惠卷</div>
                                    <div class="you">下单链接</div>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                `
                });

                $('.info').html(ele);

                // let num = 0;
                // // 加载进度条
                // timer = setInterval(() => {
                //     num += random(1, 3)

                //     $('.bar_in').css('width', num)

                //     let bar_inWidth = (parseInt($('.bar_in').css('width')))
                //     let barWidth = (parseInt($('.bar').css('width')))

                //     let value = bar_inWidth / barWidth * 100


                //     $('.bar_in').html(parseInt(value) + '%')

                //     $('.yiling .a').html(num)
                //     $('.yiling .b').html(126 - num)

                //     if (bar_inWidth >= barWidth) {
                //         clearInterval(timer)
                //         bar_inWidth = barWidth
                //         $('.bar_in').html('100%')
                //         $('.yiling .a').html(126)
                //         $('.yiling .b').html(0)
                //     }
                // }, 70)
            });
    }

    queryData(0)

    let num = 0;
    // 加载进度条
    let = timer = setInterval(() => {
        num += random(1, 3)
        $('.bar_in').css('width', num)

        let bar_inWidth = (parseInt($('.bar_in').css('width')))
        let barWidth = (parseInt($('.bar').css('width')))

        let value = bar_inWidth / barWidth * 100


        $('.bar_in').html(parseInt(value) + '%')

        $('.yiling .a').html(num)
        $('.yiling .b').html(126 - num)

        if (bar_inWidth >= barWidth) {
            clearInterval(timer)
            bar_inWidth = barWidth
            $('.bar_in').html('100%')
            $('.yiling .a').html(126)
            $('.yiling .b').html(0)
        }
    }, 70)

})();

